<script setup lang="ts">
  import { ref, computed, watch } from "vue";
  import { Filter } from "@/components/SideBar";
  import Dialog from "@/components/sql/Dialog.vue";

  const
    props = defineProps<{ modelValue?: gt.sql.prize; list?: gt.sql.prize[]; }>(),
    fd: gt.components.SideBar.Filter[] = [
      {
        value: "新增", type: "button", opt: {
          onClick() {
            click(0, format.def.prize);
          }, type: "primary", class: "mac-ico-add-round", disabled: !api.me.per("奖品创建")
        }
      },
    ],
    page = ref<gt.PageData<gt.sql.prize>>({ current: 1, size: 10, total: 0, data: [] }),
    filterData = ref<any>(fd),
    tip = ref([
      { label: "复制添加奖品", value: 0, cls: "mac-ico-add-round", per: api.me.per("奖品创建") },
      { label: "编辑奖品", value: 1, cls: "mac-ico-edit", per: api.me.per("奖品修改") },
      { label: "查看奖品", value: 2, cls: "mac-ico-search", per: true },
      { label: "删除奖品", value: 3, cls: "mac-ico-delete", per: api.me.per("奖品删除") },
    ] as const),
    emit = defineEmits<{ (e: "update:modelValue", v: gt.sql.prize): void; }>(),
    dig = ref({} as InstanceType<typeof Dialog>),
    full = computed(() => {
      return !props.list;
    })
    ;


  async function click(method: number, p: gt.sql.prize) {
    switch (method) {
      case 0: // 新增
        p.id = "";
        break;
      case 1: // 修改
        break;
      case 2: // 查看
        break;
      case 3: // 删除
        break;

      default:
        return;
    }
    dig.value.open("prize", method, p, "奖品");
  }

  async function init() {
    if (props.list) {
      page.value.data = props.list;
    } else {
      const res = await gd.prize.read({ "#page": { current: page.value.current, size: page.value.size }, });
      page.value = res;
    }
  }
  watch(() => props.list, init, { deep: true, immediate: true });
</script>
<template>
  <div class="prize whf oh y">
    <Filter v-if="full" :data="filterData" isRow class="mb1em" />
    <el-table stripe highlight-current-row :data="page.data" class="wf fg1" type="expand" row-key="id"
      @currentChange="emit('update:modelValue', $event)">
      <el-table-column v-if="full" prop="id" label="id" width="100" show-overflow-tooltip />
      <el-table-column prop="name" label="名称" show-overflow-tooltip width="120" />
      <el-table-column v-if="full" prop="image" label="图片" show-overflow-tooltip className="columnimg" width="80">
        <template #default="{ row }">
          <img :src="row.image" v-if="row.image" />
        </template>
      </el-table-column>
      <el-table-column v-if="full" prop="bgColor" label="背景颜色" show-overflow-tooltip width="80">
        <template #default="{ row }">
          <div v-if="row.bgColor" class="whf" :style="{ backgroundColor: row.bgColor }" />
          <div v-else>默认</div>
        </template>
      </el-table-column>
      <el-table-column v-if="full" prop="nameColor" label="名称颜色" show-overflow-tooltip width="80">
        <template #default="{ row }">
          <div v-if="row.nameColor" class="whf" :style="{ backgroundColor: row.nameColor }" />
          <div v-else>默认</div>
        </template>
      </el-table-column>
      <el-table-column prop="sum" label="数量" show-overflow-tooltip width="80" />
      <el-table-column prop="weight" label="权重" show-overflow-tooltip width="80" />
      <el-table-column prop="_v" label="内容" show-overflow-tooltip />
      <el-table-column v-if="full" label="操作" width="160" fixed="right">
        <template #default="{ row }">
          <div class="buttons x zb">
            <template v-for="a in tip">
              <el-tooltip v-if="a.per" :content="a.label">
                <div :class="a.cls" @click.stop="click(a.value, row)" />
              </el-tooltip>
            </template>
          </div>
        </template>
      </el-table-column>
      <el-table-column v-else label="操作" width="60" fixed="right">
        <template #default="{ $index }">
          <div class="buttons x zb">
            <el-tooltip content="删除本行">
              <div class="mac-ico-delete" @click.stop="list?.splice($index, 1)" />
            </el-tooltip>
          </div>
        </template>
      </el-table-column>

    </el-table>
    <el-pagination v-if="full" background layout="prev, pager, next, jumper, ->, sizes, total"
      :page-sizes="[10, 20, 30, 40, 50, 100]" v-model:page-size="page.size" :total="page.total"
      v-model:currentPage="page.current" @size-change="init" @current-change="init" />
    <Dialog ref="dig" />
  </div>
</template>
<style lang="scss" scoped>
  .prize {
    position: relative;
    :deep(.columnimg) {
      padding: 0;
      >div {
        >img {
          max-height: 2.86em;
        }
      }
    }
    .whf {
      min-height: 1em;
    }
    .buttons {
      >div {
        cursor: pointer;
        padding: 0 0.4em;
        font-weight: 600;
        &:hover {
          border: 1px solid #a5a5a5;
          box-sizing: border-box;
          border-radius: 0.5em;
          box-shadow: 0 0 10px #000;
        }
      }
      >.mac-ico-add-round, >.mac-ico-people-list {
        color: var(--color-success);
      }
      >.mac-ico-edit, >.mac-ico-warning {
        color: var(--color-warning);
      }
      >.mac-ico-search {
        color: var(--color-primary);
      }
      >.mac-ico-delete, >.mac-ico-my {
        color: var(--color-error);
      }
    }
    .el-table {

      .blueRow {
        color: blue;
      }
      .redRow {
        color: red;
      }
    }
  }
</style>